<template>
  <view class="container">
    <view class="top_cnt bg_set">
      <up-status-bar></up-status-bar>

      <view class="l_f_r_sb_c input_cnt_box">

        <view class="input_cnt testB">
          <up-input
              style="width: 100%; flex: 1"
              placeholder="请输入"
              prefixIcon="search"
              v-model="keyWord"
              @change="change"
              border="none"
              prefixIconStyle="font-size: 22px;color: #909399"
          ></up-input>

        </view>
        <view @click="localaddress" class="text_4_24" style="display: flex; align-items: center; margin-left: 10rpx">
          <uni-icons class="location" color="#000" type="location" size="20"></uni-icons>
          {{  LocalPositioning.city }}
        </view>
      </view>
      <view class="swiper">
        <swiper class="swiper" :indicator-dots="false" autoplay="true" interval="5000" :duration="800">
          <swiper-item v-for="(item,index) in swiperList" :key="index">
            <view class="img_cnt" @click="goURl(item.url)">
              <image class="img" :src="item.img" mode="scaleToFill"></image>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>



<view class="list_cnt_box">
    <view class="x_cnt">
      <XScroll :list="shopType" gap="40rpx">
        <template v-slot="{ item }">
          <view class="item_c l_f_c l_al_c " :class="{active:shopTypeActiveID==item.ID}"
                @click.stop="shopTypeChange(item.ID)">
            <image class="it_img" :src="item.img"></image>
            <view class="name text_5_24 l_f_c_c_c">
              <text class="name">{{ item.name }}</text>
              <image class="a_img" v-if="shopTypeActiveID==item.ID"  src="https://img.fubaozx.cn/static/newImg/locaImg1.png"></image>
            </view>

          </view>
        </template>
      </XScroll>
    </view>
    <empty v-if="!shopList.length"></empty>
    <view class="list">
      <scroll-view class="list_" style="width: 100%;height: 100%" :scroll-y="true" @scrolltolower="scrolltolower" >
      <view class="it " v-for="(it,i) in shopList" @click="goToDetail(it)">
        <image :src="it.shop_head" class="img"></image>
        <view class="flex_1 l_f_c msg_cnt">
          <view class="text_b_28 text_c_2d title">
            {{ it.name }}
          </view>
          <view class="l_f_r l_al_c rate">
            <up-rate size="14" gutter="0" readonly :modelValue="it.star" active-color="#F63B29" inactive-color="#F63B29"></up-rate>
            <view class="l_f_r l_al_c rate_text">
              <text class="text_5_24 text_c_2d">{{ (it.star).toFixed(1) }}</text>
              <text class="text_5_24 text_c_8f xl">销量</text>
              <text class="text_5_24 text_c_8f">{{ it.sales }}</text>
            </view>
          </view>
          <view class="l_f_r l_al_c ">
            <up-icon class="icon" name="map-fill" color="#000" size="16"></up-icon>
            <text class="text_5_24 text_c_2d">距离{{ jl(it.distance) || 0 }}km</text>
          </view>
        </view>

      </view>
        <view style="height: 150rpx"></view>
      </scroll-view>
    </view>
  </view>
  </view>
</template>

<script setup lang="ts">

import XScroll from "@/components/XScroll.vue";
import Empty from "@/components/empty.vue";
import {reactive} from "vue";

const {proxy} = getCurrentInstance()
const goToDetail = (it) => {
  uni.navigateTo({
    url: `/pages/localLife/localLifeDetail?id=${it.ID}&distance=${jl(it.distance)}`,
    // url: '/pages/localLife/localLifeDetail?id=4'
  })
}

//修改地址
function localaddress() {
  uni.redirectTo({
    url: "/pages/Lochig/kfc/selectCity"
  })

}


const swiperList = ref([])
const getSwiper = () => {
  proxy.$request({
    url: `api/carouselList/?page=1&size=50&code=1`,
    method: 'GET',
    success: (res) => {
      if (res.errno == 0) {
        swiperList.value = res.data.data
      }
    }
  })
}
const shopList = ref([])
const shopType = ref([])
const shopTypeActiveID = ref(0)
const shopTypeChange = (id: number) => {
  shopTypeActiveID.value = id
  queryD.value.page = 1

  shopList.value = []
  getdatas()
}
const queryData = ref({
  page: 1,
  size: 20,
})

function jl(num) {
  let nums = (Number(num) / 1000).toFixed(3)
  let numss = nums.toString().split('.')
  let number = Number(numss[1])
  if (number > (Number(number.toString()[0]) * 100) & number != 0) {

    return numss[0] + '.' + (Number(number.toString()[0]) + 1)
  } else {
    return numss[0] + '.' + Number(number.toString()[0])
  }
}

//本地定位
const LocalPositioning = reactive({
  longitude: '',
  latitude: '',
  city: '选择地址',
})
const getDinWei = () => {
  // #ifdef APP-PLUS
  const appAuthorizeSetting = uni.getAppAuthorizeSetting()
  console.log(appAuthorizeSetting.locationAuthorized !== " ", "位置获取权限")
  // if(appAuthorizeSetting.locationAuthorized!=="authorized"){//判断iOS上是否给予位置权限，有权限返回true，否则返回false
  if (appAuthorizeSetting.locationAuthorized !== " ") {//判断iOS上是否给予位置权限，有权限返回true，否则返回false


    uni.getLocation({
      type: 'wgs84',
      success: function (res) {
        LocalPositioning.longitude = res.longitude
        LocalPositioning.latitude = res.latitude
        var url = "https://restapi.amap.com/v3/geocode/regeo?key=3e2ed72107f91ba0e8a4f25e297eba78&location=" + res.longitude + ',' + res.latitude
        uni.request({
          url: url,
          method: "get",
          success(ress) {

            console.log("address2222", ress)
            LocalPositioning.city = ress.data.regeocode.addressComponent.province
            secondary()
          },
          complete: function (res) {
            console.log('complete', res)
            secondary()

          }
        })
      },
      fail: function (err) {
        console.log('err', err)
        secondary()
      },

    })
  }
  // #endif
  // #ifndef APP-PLUS

  uni.getLocation({
    type: 'wgs84',
    geocode: true, // 同时获取地址信息，减少一次请求
    success: function (res) {
      LocalPositioning.longitude = res.longitude
      LocalPositioning.latitude = res.latitude
      var url = "https://restapi.amap.com/v3/geocode/regeo?key=3e2ed72107f91ba0e8a4f25e297eba78&location=" + res.longitude + ',' + res.latitude
      uni.request({
        url: url,
        method: "get",
        success(ress) {
          console.log("address", ress)
          LocalPositioning.city = ress.data.regeocode.addressComponent.province
          secondary()
        },
        fail: function (err) {
          console.log('err', err)
        }
      })
    },
    fail: function (err) {
      console.log('err', err)
      secondary()
    }

  })
  // #endif
}
const queryD = ref({
  page: 1,
  size: 20,
})
const total = ref(0)
const getdatas = () => {
  console.log('>>>getdatas',total.value!=0&& total.value <= (queryD.value.page-1)*queryD.value.size)

  if (total.value!=0&& total.value <= (queryD.value.page-1)*queryD.value.size) {
    return
  }

  proxy.$request({
    url: `api/businessList/?shop_class_id=${shopTypeActiveID.value}&page=${queryD.value.page}&size=${queryD.value.size}&longitude=${LocalPositioning.longitude}&latitude=${LocalPositioning.latitude}&distance=100000&keyword=${keyWord.value}&code=1`,
    method: 'GET',
    success: (res) => {
      const datas = res.data.data
      console.log("res", res)
      total.value = res.data.total
      if (res.errno == 0) {
        shopList.value = [...shopList.value, ...datas]
      } else {
        uni.showToast({
          icon: 'none',
          title: res.errmsg
        })
      }
    }
  })
}
//触底
const scrolltolower=() => {
  queryD.value.page += 1
  getdatas()
}
const keyWord = ref('')
let timer = null
const change = (val) => {
  queryD.value.page = 1
  console.log(val)
  if (timer) {
    clearTimeout(timer)
  }
  timer = setTimeout(() => {
    shopList.value = []
    keyWord.value = val
    getdatas()

  }, 500)
}

function secondary() {
  proxy.$request({
    url: `api/shopClassList/?page=1&size=999&code=1`,
    method: 'GET',
    success: (res) => {
      if (res.errno == 0) {
        let datae = res.data.data
        datae.unshift({
          name: '全部',
          ID: 0,
          img: 'https://img.fubaozx.cn/static/newImg/locaImg.png'
        })
        shopType.value = datae
        queryD.value.page = 1

        getdatas()
      }

    }
  })
}


onLoad((e) => {
  getSwiper()
  const localLifecity=uni.getStorageSync('localLifecity')

  if (localLifecity) {
    LocalPositioning.city = localLifecity
    uni.request({ //地址换经纬度

      url: `https://restapi.amap.com/v3/geocode/geo?address=${localLifecity}&key=3e2ed72107f91ba0e8a4f25e297eba78`,
      method: "GET",
      success(res) {
        console.log(res, "地址换经纬度")
        if (res.data.status == 1) {
          const addressarr = res.data.geocodes[0].location.split(",");
          LocalPositioning.latitude = Number(addressarr[1])
          LocalPositioning.longitude = Number(addressarr[0])
          secondary()

        } else {
          getDinWei()
        }
      },
    });
  }else {
    getDinWei()
  }

})

</script>


<style scoped lang="scss">
.container {
  padding-top: 1rpx;
  width: 100vw;
  height: calc(100vh - 100rpx);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-image: url("https://img.fubaozx.cn/static/newImg/locaImgBg.png.png");
  background-repeat: no-repeat;
  background-size: 100% auto;


  .top_cnt{
    width: 100%;
    //height: 528rpx;
    //background-image: url("https://img.fubaozx.cn/static/newImg/locaImgBg.png.png");
    padding-top: 1rpx;
    .input_cnt_box {
      margin-top: 10rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      white-space: nowrap;


      .input_cnt {

        flex: 1;
        height: 64rpx;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 62rpx 62rpx 62rpx 62rpx;
        border: 1rpx solid #FFFFFF;
        margin: 20rpx auto;
        display: flex;
        align-items: center;
        padding: 0 26rpx;


      }
    }
    .swiper {
      width: 690rpx;
      height: 212rpx;
      //overflow: hidden;
      margin: 32rpx auto 0;

      .img_cnt {
        width: 690rpx;
        height: 212rpx;
        overflow: hidden;
        border-radius: 20rpx 20rpx;

        .img {
          width: 690rpx;
          height: 212rpx;
          object-fit: cover;
        }
      }
    }
  }


}
.list_cnt_box{
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #f7f7f7;
  margin-top: 32rpx;
  border-radius: 25rpx 25rpx 0rpx 0rpx;
  padding: 36rpx 30rpx;

}


.x_cnt {
  //padding: 28rpx;

  .item_c {
    .it_img {
      width: 76rpx;
      height: 76rpx;
      border-radius: 50%;
    }

    .name {
      margin-top: 5rpx;
      white-space: nowrap;
    }

    &.active {
      .name {
        font-weight: bold;
        color: #FF4A01;

      }
      .a_img{
        width: 32rpx;
        height: 14rpx;
        margin-top: 5rpx;
      }
    }
  }
}

.list {
  margin-top: 40rpx;
  position: relative;
  z-index: 1;
  flex: 1;
  overflow: hidden;
  //padding: 0 28rpx;
  :deep(.uni-scroll-view-content){
    display: grid;
    grid-template-columns: repeat( 2 , 1fr);
    gap: 18rpx 28rpx;
  }

  .it {
    box-sizing: border-box;
    width: 100%;
    height: 550rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    //overflow: hidden;
    .img {
      width: 100%;
      height: 336rpx;
      margin-right: 16rpx;
      border-radius:  20rpx 20rpx 0rpx 0rpx;

    }

    .flex_1 {
      height: 168rpx;
      justify-content: space-between;
      padding: 0 22rpx;

      .title {
        min-height: 80rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;

      }

      .rate {
        gap: 5rpx;
        margin-bottom: 5rpx;
        margin-top: 3rpx;

        .rate_text {
          gap: 5rpx;
          .xl{
            margin-left: 10rpx;
          }
        }
      }

      .icon {
        margin-right: 4rpx;
      }
    }

  }
}


</style>
